<template>
  <div>
    <a-row :gutter="24">
      <a-col v-if="Cardtype=='sy'" :sm="24" :md="12"  :style="{ marginBottom: '24px' }">
        <inform-list :pageSize="3" title="最新通知" type="0"></inform-list>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="当天业绩"
                    :total="'￥'+ todayAggregationResult[roleStrMapDic[roleStr]]  | NumberFormat">
        </chart-card>
      </a-col>
      <a-col v-if="roleStr === 'admin'" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="当天利润" :total="'￥'+ todayAggregationResult.profit | NumberFormat">
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月业绩"
                    :total="'￥'+ monthAggregationResult[roleStrMapDic[roleStr]] | NumberFormat">
        </chart-card>
      </a-col>
      <a-col v-if="roleStr === 'admin'" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="本月利润" :total="'￥'+ monthAggregationResult.profit | NumberFormat">
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <a-row :style="{marginTop:'10px',marginLeft:'10px'}">
        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
          年份:
          <a-select default-value="2021" style="width: 120px" @change="yearSelectChange">
            <a-select-option v-for="y in yearList" :value="y">{{y}}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
          <!--          <bar title="历史业绩" :dataSource="monthTakeMoneyAggregationList" />-->
          <div :style="{ padding: '0 0 32px 32px' }">
            <h4 :style="{ marginBottom: '20px' }">{{ '历史业绩' }}</h4>
            <v-chart :forceFit="true" :height="254" :data="monthTakeMoneyAggregationList" :padding="padding" >
              <v-tooltip :itemTpl="itemTpl" :containerTpl="containerTpl"/>
<!--              <v-tooltip :htmlContent="renderToolTip"/>-->
              <v-axis/>
              <v-bar position="x*y"/>
            </v-chart>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import Bar from '@/components/chart/Bar'
  import TransferBar from '@/components/chart/TransferBar'
  import Trend from '@/components/Trend'
  import {orderFormAggregationsTotal, orderFormAggregationsTotalByMonth, queryYearList} from '@/api/api'
  import {Dict} from '@/api/Dict'
  import {triggerWindowResizeEvent} from '@/utils/util'
  import InformList from "@views/account/center/page/informList";

  const barData = [];
  for (let i = 1; i <= 12; i++) {
    barData.push({
      x: `${i}月`,
      y: 0
    })
  }

  export default {
    name: 'AggregationChartCard',
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      Bar,
      TransferBar,
      Trend,
      InformList
    },
    mixins: [Dict],
    props: ['username', 'loading', 'roleStr','Cardtype'],
    created() {
      this.itemTpl = '<li data-index={index}>'
        + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span><span>业绩:￥{value}</span></li>';
      this.containerTpl = '<div class="g2-tooltip">'
        + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
        + '<ul class="g2-tooltip-list">111</ul>'
        + '</div>'
      this.userInfo = this.$store.getters.userInfo;
      this.roleStr = this.roleStr || this.$store.getters.userInfo.rolestr;
      this.queryTotal();
      this.queryTotalByMonth();
      this.getYearList();
    },
    mounted() {
      triggerWindowResizeEvent();
    },
    data() {
      return {
        containerTpl: '',
        itemTpl:'',
        todayAggregationResult: {
          totalTakeMoney: 0,
          profit: 0,
          totalCost: 0,
          commission: 0
        },
        monthAggregationResult: {
          totalTakeMoney: 0,
          profit: 0,
          totalCost: 0,
          commission: 0
        },
        monthTakeMoneyAggregationList: [],
        userInfo: {},
        year: new Date().getFullYear(),
        yearList: [],
        padding: ['auto', 'auto', '40', '50']
      }

    },
    methods: {
      renderToolTip(title, items) {
        console.log("items--->",items);
        console.log("items-[0]-->",items[0].point._origin.z[this.roleStrMapDic[this.roleStr]]);
        return '<div class="g2-tooltip">'
        + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
        + '<ul class="g2-tooltip-list">' +
          '<li data-index={index}>'
          + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>业绩:￥'
          +items[0].point._origin.z[this.roleStrMapDic[this.roleStr]]+
          +'</li>' +
          '</ul>'
        + '</div>';
      },
      queryTotal() {
        let data = {
          type: 0,
          userName: this.username
        };
        orderFormAggregationsTotal(data).then(res => {
          if (res.success) {
            this.todayAggregationResult = res.result;
          }
        });
        let monthData = {
          type: 1,
          userName: this.username
        };
        orderFormAggregationsTotal(monthData).then(res => {
          if (res.success) {
            this.monthAggregationResult = res.result;
          }
        });
      },
      queryTotalByMonth() {
        let data = {
          year: this.year,
          userName: this.username
        };
        orderFormAggregationsTotalByMonth(data).then(res => {
          if (res.success) {
            let result = res.result;
            for (let r of result) {
              let y = 0;
              this.monthTakeMoneyAggregationList.push({
                x: `${r.mon.substring(6)}月`,
                y: r[this.roleStrMapDic[this.roleStr]],
                z: r
              });
            }
            if (this.monthTakeMoneyAggregationList.length === 0) {
              this.monthTakeMoneyAggregationList = barData;
            }
          }
        });
      },
      yearSelectChange(val) {
        this.year = val;
        this.monthTakeMoneyAggregationList = [];
        this.queryTotalByMonth();
      },
      getYearList() {
        queryYearList().then(res => {
          if (res.success) {
            this.yearList = res.result;
          }
        });
      }

    }
  }
</script>